import React, {FC, useContext} from 'react';
import {JorStatistic, JournalStatisticCard} from "@/pages/JournalPage/JournalDetail/JournalStatistic/index";
import {JournalDetailContext} from "@/pages/JournalPage/JournalDetail/commons/JournalDetailContext";
import {useRequest} from "ahooks";
import * as API from "@/services";
import {Button, Form} from "antd";
import {KfDateRangePicker} from "kf-web-library";
import dayjs from "dayjs";
import {FormattedMessage} from "@@/exports";

interface MilestoneStatsProps {
}

const MilestoneStats: FC<MilestoneStatsProps> = (props) => {
  const {journalId} = useContext(JournalDetailContext);

  const dataReq = useRequest((p) => API.queryFrontJournalEditorNum({
    journalId: journalId!,
    ...p,
  }), {
    ready: !!journalId,
    refreshDeps: [journalId]
  })
  const record = dataReq?.data?.data;

  return (
    <JournalStatisticCard title={<FormattedMessage id="stats.milestoneStatistics"/>}
                          className={"milestone-stats-card"}
                          extra={
                            <div className={"journal-statistic-filter"}>
                              <Form layout={"inline"} onFinish={(values) => {
                                const [start, end] = values.date;
                                dataReq.run({
                                  startDate: (start && dayjs(start).format("YYYY-MM-DD")) ?? undefined,
                                  endDate: (end && dayjs(end).format("YYYY-MM-DD")) ?? undefined,
                                })
                              }}>
                                <Form.Item name={"date"}>
                                  <KfDateRangePicker picker="date"/>
                                </Form.Item>
                                <Form.Item>
                                  <Button
                                    type="primary"
                                    htmlType="submit"
                                  >
                                    <FormattedMessage id="text.filter"/>
                                  </Button>
                                </Form.Item>
                              </Form>
                            </div>
                          }
    >
      <div className={"milestone-jor-stats-wrap"}>
        <JorStatistic title={<FormattedMessage id="stats.numberOfReceived"/>} value={record?.receiveArticleNum || 0} color={"#0D67E2"}/>
        <JorStatistic title={<FormattedMessage id="stats.averageReviewDays"/>} value={record?.reviewArticleDay || 0} color={"#11BB8D"}/>
        <JorStatistic title={<FormattedMessage id="stats.numberOfRevisions"/>} value={record?.returnArticleDay || 0} color={"#F08C4D"}/>
      </div>
    </JournalStatisticCard>
  );
};

export default MilestoneStats;
